import { Breadcrumb, Select, Pagination, Spin } from 'antd';
import { connect } from "react-redux";

import { List } from '../../components/List';
import { Nav } from "../../components/Nav";
import { goodsInitAction, pageChangeAction } from "../../actionCreators/actions";

import { Head } from "../../components/Head";
import { Foot } from "../../components/Footer";

const Option = Select.Option;

import './index.less';



class UI extends React.Component {
    constructor() {
        super();

        this.onChange = this.onChange.bind(this);
    }
    componentDidMount() {
        this.props.goodsInit();
    }

    handleSortBy(value) {
        console.log(`sortBy: ${value}`);
    }
    handleAsc(value) {
        console.log(`isAsc: ${value}`);
    }

    onChange(page, pageSize) {
        this.props.pageChange(page, pageSize);
    }

    render() {
        let { goodsList, current, defaultCurrent, defaultPageSize, total } = this.props;

        let startIndex = (current - 1) * defaultPageSize;
        let endIndex = startIndex + defaultPageSize - 1;

        let list = [];

        for (let i = 0; i < goodsList.length; i++) {
            if (i >= startIndex && i <= endIndex) {
                list.push(goodsList[i]);
            }
        }

        let domGoods = goodsList.length == 0 ? (
            <div className="my-spin">
                <Spin size="large" tip="正在拼命加载中 ... " />
            </div>
        ) : (
                <div className="goods ">
                    <Nav {...this.props}/>
                    <div className="content w1000" >
                        <Breadcrumb>
                            <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                            <Breadcrumb.Item><a href="/goods">全部分类</a></Breadcrumb.Item>
                            <Breadcrumb.Item><a href="javascript:;">小说</a></Breadcrumb.Item>
                        </Breadcrumb>

                        <List goodsList={list} isList={true} history={this.props.history} />

                        <div className="page ">
                            <Pagination
                                defaultCurrent={defaultCurrent}
                                defaultPageSize={defaultPageSize}
                                total={total}
                                onChange={this.onChange}
                            />
                        </div>
                    </div>
                    <Foot />
                </div >
            );

        return domGoods;
    }
}

let mapStateToProps = ({ goodsReducer }) => goodsReducer;

let mapDispatchToProps = dispatch => {
    return {
        goodsInit() {
            // getListAction是一个异步函数，用来获取ajax数据
            dispatch(goodsInitAction);
        },
        pageChange(page, pageSize) {
            dispatch(pageChangeAction(page));
        }
    }
}

export let Goods = connect(mapStateToProps, mapDispatchToProps)(UI);